<template>
    <div>
      <h2>物流相关信息</h2>
      <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <div class="logistics-status"
          :class="{redClass:status == '未发货',orangeClass:status == '已发货',yellowClass:status == '已签收',greenClass:status == '未签收',blueClass:status == '未知状态'}"
          >{{status}}</div>
          <div class="logistics-company">{{orderInfo.company}}</div>
          <div class="logistics-no">{{orderInfo.logisticsNo}}</div>
        </div>
      </div>
      <ul class="logistics-info-list">
        <li v-for="(item,index) in orderInfo.logisticsInfo"  :key="index">
          <div class="logistics-info-list-time">2023-02-03 00:00:00</div>
          <div class="logistics-info-list-content">快件已经发货</div>
        </li>
      </ul>
      <button>查看物流详情</button>
    </div>
  </template>
  
  <script>
  export default {
    props:['orderInfo','statusText'],
    data(){
      return {
        status:''
      }
    },
     created() {
      this.getStatusInfo(this.orderInfo.logisticsStatus);
      // console.log(this.status);
    },
    methods: {
      getStatusInfo(status) {
        switch (status) {
          case 0:
            return  (this.status = "未发货");
          case 1:
            return (this.status = "已发货");
          case 2:
            return (this.status = "已签收");
          case 3:
            return (this.status = "未签收");
          default:
            return (this.status = "未知状态");
        }
      }
    }
  };
  </script>
  
  <style>
  
  </style>
  